<template>
  <van-tabbar
    v-model="active"
    active-color="#e40137"
    inactive-color="#b4b4bd"
    route
    class="tabbar"
  >
    <van-tabbar-item to="/" icon="home-o"
      ><span class="title">公司</span>
      <template #icon>
        <i class="iconfont f28">&#xe63d;</i>
      </template></van-tabbar-item
    >
    <van-tabbar-item to="/questions" icon="search"
      ><span class="title">刷题</span>
      <template #icon>
        <i class="iconfont f28">&#xe63f;</i>
      </template></van-tabbar-item
    >
    <van-tabbar-item to="/find" icon="friends-o"
      ><span class="title">发现</span>
      <template #icon>
        <i class="iconfont f28">&#xe646;</i>
      </template></van-tabbar-item
    >
    <van-tabbar-item to="/my" icon="setting-o"
      ><span class="title">我的</span>
      <template #icon>
        <i class="iconfont f28">&#xe645;</i>
      </template></van-tabbar-item
    >
  </van-tabbar>
</template>

<script>
export default {
  name: 'MyTabbar',
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.f28 {
  font-size: 58px;
}
.tabbar {
  height: 100px;
}
.title {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0px;
}
</style>
